<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>适用范围定义</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css" />
<script type="text/javascript" src="${jspath}/jquery/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<script type="text/javascript"
	src="${bootstrapPath}/js/bootstrap3-validation.js"></script>
<script type="text/javascript" src="${layerPath}/layer.js"></script>
<script type="text/javascript">
var productType = "";
var proDesc = "";
var row_count = 0;
window.onload = function(){
selectValue('type','${eligibility.category}');
selectType(document.getElementById("type").value);
selectValue('typeValue','${eligibility.name}');
var div = $("#checkboxdiv");
div.append($("<input type='checkbox' id='non-standardProduct' name='checkbox' value='Y'/><font style='color: red;'>&nbsp;允许使用非标产品</font>"));
if('${eligibility.marsIntegrated}'== 'Y'){
	$("#non-standardProduct").attr("checked",true);
}else{
	$("#non-standardProduct").attr("checked",false);
}
<core:forEach items="${eligibilityLineDtoList}" var="eligibilityLine">
	insert();
	document.getElementById("eligibilityLineId"+(row_count-1)).value=${eligibilityLine.id};
 	selectValue('property'+(row_count-1),'${eligibilityLine.attrName}');
	selectPropertyForInsertRow('${eligibilityLine.attrName}',"description"+(row_count-1));
	selectValue('operator'+(row_count-1),'${eligibilityLine.operator}');
	document.getElementById("value"+(row_count-1)).value='${eligibilityLine.attrValue}';
</core:forEach>
};
$(function(){
	$("#insertRow")
	.click(
			function() {
				var table = $("#data_tabs");
				var row = $("<tr></tr>");
				var td0 = $("<td></td>");
				var td1 = $("<td></td>");
				var td2 = $("<td></td>");
				var td3 = $("<td></td>");
				var td4 = $("<td></td>");
				td0
						.append($("<select id='property"+row_count+"' name='attrName' onchange='selectPropertyForInsertRow(this[selectedIndex].value,\"description"+row_count+"\")' class='form-control input-sm' style='width: 150px;padding-left: 0;'></select>"));
				row.append(td0);

				td1
						.append($("<input class='form-control input-sm text-right' id='description"+row_count+"' value='' type='text' readonly />"));
				row.append(td1);

				td2
						.append($("<select id='operator"+row_count+"' name='operator' class='form-control input-sm' style='width: 100px;padding-left: 0;'><option value='equal'>等于</option><option value='notEqual'>不等于</option><option value='include'>包含</option><option value='notInclude'>不包含</option></select>"));
				row.append(td2);

				td3
						.append($("<input class='form-control input-sm text-left' name='attrValue' id='value"+row_count+"' value='' type='text'/>"));
				row.append(td3);
				
				td4
				.append($("<button type='button' class='form-control btn btn-default btn-link btn-xs' id='removeRow"+row_count+"' onclick='removeRow(this.id)' style='height:30px;width:15px;padding:0px;border: 0px;'><i class='glyphicon glyphicon-minus-sign' style='color: red'></i></button>"));
				row.append(td4);

				table.append(row);
				type = $('#type option:selected').val();
				typeValue = $('#typeValue option:selected').val();
				selectTypeValueForInsert(type,typeValue,row_count);
				row_count++;
			});
	
	$("#cleanAll").click(function(){
		$.ajax({
			url : '${webcontext}/crmdp/dealer/coupon/removeAll',
			type : 'post',
			data : {
				'ticketLineId' : $("#ticketLineId").val(),
			},
			async : false, //默认为true 异步 
			dataType:'json',
			success : function(data) {
				if(data){
					jAlert("删除成功！", "提示信息", function(){
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index);
					});
				}else{
					jAlert("删除失败！", "提示信息");
				}
			},
			
		});
	});
	
	$("#returnBtn").click(function(){
		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		parent.layer.close(index); //再执行关闭 
	});
})

function removeRow(id){
	$("#" + id).parent().parent().remove();
}

function insert(){
	var table = $("#data_tabs");
	var row = $("<tr></tr>");
	var td0 = $("<td></td>");
	var td1 = $("<td></td>");
	var td2 = $("<td></td>");
	var td3 = $("<td></td>");
	var td4 = $("<td></td>");
	td0
		.append($("<input id='eligibilityLineId"+row_count+"' name='id' value='' type='hidden' /><select id='property"+row_count+"' name='attrName' onchange='selectPropertyForInsertRow(this[selectedIndex].value,\"description"+row_count+"\")' class='form-control input-sm' style='width: 150px;padding-left: 0;'></select>"));
	row.append(td0);

	td1
			.append($("<input class='form-control input-sm text-right' id='description"+row_count+"' value='' type='text' readonly />"));
	row.append(td1);

	td2
			.append($("<select id='operator"+row_count+"' name='operator' class='form-control input-sm' style='width: 100px;padding-left: 0;'><option value='equal'>等于</option><option value='notEqual'>不等于</option><option value='include'>包含</option><option value='notInclude'>不包含</option></select>"));
	row.append(td2);

	td3
			.append($("<input class='form-control input-sm text-left' name='attrValue' id='value"+row_count+"' value='' type='text'/>"));
	row.append(td3);
	
	td4
			.append($("<button type='button' class='form-control btn btn-default btn-link btn-xs' id='removeRow"+row_count+"' onclick='removeRow(this.id)' style='height:30px;width:15px;padding:0px;border: 0px;'><i class='glyphicon glyphicon-minus-sign' style='color: red'></i></button>"));
	row.append(td4);

	table.append(row);
	type = $('#type option:selected').val();
	typeValue = $('#typeValue option:selected').val();
	selectTypeValueForInsert(type,typeValue,row_count);
	row_count++;
}

function selectValue(sId,value){  
    var s = document.getElementById(sId);  
    var ops = s.options;  
    for(var i=0;i<ops.length; i++){  
        var tempValue = ops[i].value;  
        if(tempValue == value)  
        {  
            ops[i].selected = true;  
            break;
        }  
    }  
}

function selectProperty(property){
	$.ajax({
		url: '${webcontext}/crmdp/dealer/coupon/showDescriptionOfProperty',
		type: 'post',
		data: {
			'codeValue' : property,
		},
		async : false,
		success:function(data){
			var description = data.description;
			if(description != null && description != ""){
				document.getElementById("description").value=description;
			}
		}
	});
}

function selectPropertyForInsertRow(property,id){
	$.ajax({
		url: '${webcontext}/crmdp/dealer/coupon/showDescriptionOfProperty',
		type: 'post',
		data: {
			'codeValue' : property,
		},
		async : false,
		success:function(data){
			var description = data.description;
			if(description != null && description != ""){
				document.getElementById(id).value=description;
			}
		}
	});
}

function insertRow(o,row_count){
	$.ajax({
		url : '${webcontext}/crmdp/dealer/coupon/showPropertyOfProduct',
		type : 'post',
		data : {
			'productType' : o,
		},
		async : false, //默认为true 异步 
		dataType:'json',
		success : function(data) {
			var codeList = data.codeList;
			if(codeList != null && codeList != ""){
				var select = $("#property"+row_count);
				document.getElementById("property"+row_count).options.length=0;
				select.append($("<option id='defultValue' value='---请选择---'>---请选择---</option>"));
				for(var key in codeList){
					select.append($("<option value='"+codeList[key]+"'>"+codeList[key]+"</option>"));
				}
			}else{
				var select = $("#property"+row_count);
				document.getElementById("property"+row_count).options.length=0;
				select.append($("<option value='---请选择---'>---请选择---</option>"));
			}
		},
		
	});
}

function selectType(o){
	productType = o;
	$.ajax({
		url : '${webcontext}/crmdp/dealer/coupon/showPropertyOfProduct',
		type : 'post',
		data : {
			'productType' : o,
		},
		async : false, //默认为true 异步 
		dataType:'json',
		success : function(data) {
			if(data != null && data != ""){
				var codeList = data.codeList;
				if(data != null && data != ""){
					var codeList = data.codeList;
					if(codeList != null && codeList != ""){
						var select = $("#typeValue");
						document.getElementById("typeValue").options.length=0;
						select.append($("<option id='defultValue' value='---请选择---'>---请选择---</option>"));
						for(var key in codeList){
		 					select.append($("<option value='"+codeList[key]+"'>"+codeList[key]+"</option>"));
						}
					}else{
						var select = $("#typeValue");
						document.getElementById("typeValue").options.length=0;
						select.append($("<option id='defultValue' value='---请选择---'>---请选择---</option>"));
					}
				}else{
					var select = $("#typeValue");
					document.getElementById("typeValue").options.length=0;
					select.append($("<option id='defultValue' value='---请选择---'>---请选择---</option>"));
				}
			}
		}
	});
}

function selectTypeValue(o,p){
	$.ajax({
		url : '${webcontext}/crmdp/dealer/coupon/showPropertyOfProductTypeValue',
		type : 'post',
		data : {
			'productType' : o,
			'productTypeValue' : p,
		},
		async : false,
		success : function(data) {
			if(data != null && data != ""){
				if(data.codeInfoList != undefined){
					var codeInfoList = data.codeInfoList;
					for(var i = 0; i <= (row_count-1); i++){
						if(codeInfoList != null && codeInfoList != ""){
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							for(var key in codeInfoList){
			 					select.append($("<option value='"+codeInfoList[key].value+"'>"+codeInfoList[key].value+"</option>"));
							}
							document.getElementById("description" + i).value="";
						}else{
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							document.getElementById("description" + i).value="";
						}
					}
				}else if(data.codeValueList != undefined){
					var codeValueList = data.codeValueList;
					for(var i = 0; i <= (row_count-1); i++){
						if(codeValueList != null && codeValueList != ""){
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							for(var key in codeValueList){
			 					select.append($("<option value='"+codeValueList[key]+"'>"+codeValueList[key]+"</option>"));
							}
							document.getElementById("description" + i).value="";
						}else{
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							document.getElementById("description" + i).value="";
						}
					}
				}else{
					var select = $("#property");
					document.getElementById("property").options.length=0;
					select.append($("<option value='---请选择---'>---请选择---</option>"));
					document.getElementById("description").value="";
					for(var i = 0; i <= (row_count-1); i++){
						if(codeValueList != null && codeValueList != ""){
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							for(var key in codeValueList){
			 					select.append($("<option value='"+codeValueList[key]+"'>"+codeValueList[key]+"</option>"));
							}
							document.getElementById("description" + i).value="";
						}else{
							var select = $("#property" + i);
							document.getElementById("property" + i).options.length=0;
							select.append($("<option value='---请选择---'>---请选择---</option>"));
							document.getElementById("description" + i).value="";
						}
					}
				}
							
			}else{
				for(var i = 0; i <= (row_count-1); i++){
					var select = $("#property" + i);
					document.getElementById("property" + i).options.length=0;
					select.append($("<option value='---请选择---'>---请选择---</option>"));
					document.getElementById("description" + i).value="";
				}
			}
		}
	});
}

function selectTypeValueForInsert(o,p,q){
	$.ajax({
		url : '${webcontext}/crmdp/dealer/coupon/showPropertyOfProductTypeValue',
		type : 'post',
		data : {
			'productType' : o,
			'productTypeValue' : p,
		},
		async : false,
		success : function(data) {
			if(data != null && data != ""){
				if(data.codeInfoList != undefined){
					var codeInfoList = data.codeInfoList;
					if(codeInfoList != null && codeInfoList != ""){
						var select = $("#property" + q);
						document.getElementById("property" + q).options.length=0;
						select.append($("<option value='---请选择---'>---请选择---</option>"));
						for(var key in codeInfoList){
		 					select.append($("<option value='"+codeInfoList[key].value+"'>"+codeInfoList[key].value+"</option>"));
						}
						document.getElementById("description" + q).value="";
					}else{
						var select = $("#property" + q);
						document.getElementById("property" + q).options.length=0;
						select.append($("<option value='---请选择---'>---请选择---</option>"));
						document.getElementById("description" + q).value="";
					}
				}else if(data.codeValueList != undefined){
					var codeValueList = data.codeValueList;
					if(codeValueList != null && codeValueList != ""){
						var select = $("#property" + q);
						document.getElementById("property" + q).options.length=0;
						select.append($("<option value='---请选择---'>---请选择---</option>"));
						for(var key in codeValueList){
		 					select.append($("<option value='"+codeValueList[key]+"'>"+codeValueList[key]+"</option>"));
						}
						document.getElementById("description" + q).value="";
					}else{
						var select = $("#property" + q);
						document.getElementById("property" + q).options.length=0;
						select.append($("<option value='---请选择---'>---请选择---</option>"));
						document.getElementById("description" + q).value="";
					}
				}else{
					var select = $("#property" + q);
					document.getElementById("property" + q).options.length=0;
					select.append($("<option value='---请选择---'>---请选择---</option>"));
					document.getElementById("description" + q).value="";
				}
				
			}else{
				var select = $("#property" + q);
				document.getElementById("property" + q).options.length=0;
				select.append($("<option value='---请选择---'>---请选择---</option>"));
				document.getElementById("description" + q).value="";
			}
		}
	});
}

function savebtn(){
	var type = document.getElementById("type").value;
	var typeValue = document.getElementById("typeValue").value;
	var standardProduct = document.getElementById("non-standardProduct").value;
	var propertyList = document.getElementsByName("attrName");
	var operatorList = document.getElementsByName("operator");
	var valueList = document.getElementsByName("attrValue");
	if(type == null || type == undefined || type == "" || type == "---请选择---"
			|| typeValue == null || typeValue == undefined || typeValue == "" || typeValue == "---请选择---"){
		jAlert("请选择类型与类型值！", "提示信息");
		return false;
	}else{
		for(var i=0; i<operatorList.length; i++){
			if(propertyList[i].value != "---请选择---"){
				if(propertyList[i].value == null || propertyList[i].value == undefined || propertyList[i].value == "" || 
						operatorList[i].value == null || operatorList[i].value == undefined || operatorList[i].value == "" || 
						valueList[i].value == null || valueList[i].value == undefined || valueList[i].value == ""){
					jAlert("请将信息填写完整或清空！", "提示信息");
					return false;
				}
			}
		}
	}
	$.ajax({
		url : '${webcontext}/crmdp/dealer/coupon/saveScopeOfTicket',
		type : 'post',
		data : $('#scopeForm').serialize(),
		success : function(data) {
			if(data){
				jAlert("保存成功！", "提示信息", function(){
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index);
				});
			}else{
				jAlert("保存失败，请重新操作", "提示信息", function(){
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index);
				});
			}
		}
	});
}
	function viewBtn(){
		var type = document.getElementById("type").value;
		var typeValue = document.getElementById("typeValue").value;
		var propertyList = document.getElementsByName("attrName");
		var operatorList = document.getElementsByName("operator");
		var valueList = document.getElementsByName("attrValue");
		if(type == null || type == undefined || type == "" || type == "---请选择---"
				|| typeValue == null || typeValue == undefined || typeValue == "" || typeValue == "---请选择---"){
			jAlert("请选择类型与类型值！", "提示信息");
			return false;
		}else{
			for(var i=0; i<operatorList.length; i++){
				if(propertyList[i].value != "---请选择---"){
					if(propertyList[i].value == null || propertyList[i].value == undefined || propertyList[i].value == "" || 
							operatorList[i].value == null || operatorList[i].value == undefined || operatorList[i].value == "" || 
							valueList[i].value == null || valueList[i].value == undefined || valueList[i].value == ""){
						jAlert("请将信息填写完整或清空！", "提示信息");
						return false;
					}
				}
			}
		}
		$.ajax({
			url : '${webcontext}/crmdp/dealer/coupon/showViewOfTicket',
			type : 'post',
			data : $('#scopeForm').serialize(),
			dataType:'json',
			success : function(data) {
				if(data != null){
					var  url = "${webcontext}/crmdp/dealer/coupon/showViewForLayer?sqlId="+data.sqlId+"&type="+data.type;
				 	layer.open({
				 	    type: 2,
				 	    title: '适用范围',
				 	    shadeClose: false,
				 	    shade: 0.1, 
				 	    offset : ['12%' , '15%'],
				 	    area: ['600px', '350px'],
				 	    content: url//iframe的url
				 	}); 
				}else{
					jAlert("预览失败", "提示信息");
				}
			}
		});
	}
</script>
</head>


<style>
html,body {
	overflow-y: auto;
	overflow-x:hidden;
}
.hr {
	text-align: center;
	width: 100%;
	background-color: #0071C1;
	height: 1px;
	margin-bottom: 10px;
}

.rowDiv {
	width: 90%;
}

.formDiv {
	float: left;
	width: 50%;
}

.textarea {
	width: 700px;
	height: 100px;
	max-width: 700px;
	max-height: 100px;
	resize: none;
}
.btnLength{
	width:70px;
}
.main{
  width: 1120px;
  padding: 0;
  margin: 0;
}
</style>
<body>
	<div class="main">
		<div style="color: #025D7B; height: 26px; line-height: 26px;">
			<span>提货券/优惠券定义</span> <span>&gt;</span> <span>提货券/优惠券修改</span> <span>&gt;</span> <span>适用范围</span>
		</div>
		<div class="hr"></div>
		<form:form id="scopeForm"
			action="#"
			class="form-horizontal" method="post"
			role="form">
			<input type="hidden" id="ticketLineId" name="ticketLineId" value="${ticketLineId }"></input>
			<div class="row rowDiv">
				<div class="form-group formDiv" style="width: 465px;">
					<label class="col-sm-3 control-label" for="verificationMethod">类别</label>
					<div class="col-sm-2">
						<select id="type" name="partType" hidden="true"
						 class="form-control input-sm" 
						 style="width: 150px;"
						 onchange="selectType(this[selectedIndex].value)">
							<option id="defultType" value="---请选择---">---请选择---</option>
							<option id="mainGroup" value="mainGroup">mainGroup</option>
							<option id="subGroup" value="subGroup">subGroup</option>
							<option id="positionGroup" value="positionGroup">positionGroup</option>
						</select>
					</div>
				</div>
					
				<div class="form-group formDiv">
					<label class="col-sm-2 control-label" for="verificationMethod">类别值</label>
					<div class="col-sm-2">
						<select id="typeValue" name="partTypeValue"
						 class="form-control input-sm" 
						 style="width: 200px;"
						 onchange="selectTypeValue($('#type option:selected').val(),this[selectedIndex].value)">
							<option id="defultValue" value="---请选择---">---请选择---</option>
						</select>
					</div>
				</div>
			</div>
			<div class="row rowDiv">
				<div class="form-group formDiv">
				<label class="col-sm-2 control-label" for="verificationMethod"></label>
					<div id="checkboxdiv" class="col-sm-4" style="padding-top: 7px;padding-left: 0px;">
						
					</div>
				</div>
				<div class="form-group formDiv">
					<button type="button" class="btn btn-success btn-xs" id="cleanAll" style="width: 120px;margin-top: 7px;">
						<i class="glyphicon glyphicon-minus-sign" style="color: #FFFFFF;"></i>&nbsp;删除所有设置
					</button>
				</div>
			</div>
		<table id="data_tabs" class="table" style="margin-top: 20px; margin-left: 20px;width: 60%;">
			<thead>
				<tr>
					<th class="text-left">属性</th>
					<th class="text-left">描述</th>
					<th class="text-left">操作符</th>
					<th class="text-left">值<font style="font-size: 12px;color: red;">&nbsp;&nbsp;(如有多个值，请用“|”符隔开)</font></th>
				</tr>
			</thead>
			<tbody>
			
			</tbody>
		</table>
		</form:form>
		<div style="margin-left: 200px;">
			<button type="button" class="btn btn-success btn-sm" id="saveBtn" onclick="viewBtn();">
				<i class="glyphicon glyphicon-floppy-saved" style="color: #FFFFFF"></i>&nbsp;预览
			</button>
			<button type="button" class="btn btn-success btn-sm" id="insertRow">
				<i class="glyphicon glyphicon-plus" style="color: #FFFFFF"></i>&nbsp;新增
			</button>
			<button type="button" class="btn btn-success btn-sm"
				onclick="savebtn()">
				<i class="glyphicon glyphicon-plus" style="color: #FFFFFF"></i>&nbsp;保存
			</button>
			<button type="button" class="btn btn-success btn-sm" id="returnBtn">
				<i class="glyphicon glyphicon-retweet" style="color: #FFFFFF"></i>&nbsp;返回
			</button>
		</div>
	</div>
</body>
</html>